/*
* @file 持仓查询
*/
import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Input,Button,Row,Col,Card,Table,Icon,Pagination,DatePicker,Form,Breadcrumb,Spin,message,Tabs  } from 'antd';
import moment from 'moment';

import Tabtitle from '../../../components/common/TabTitle';
import Tablelist from '../../../components/common/TableData';
import FundsTabel from './PdtFunds';

import style from './pdtposition.less';

const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const nowDate = moment(new Date()).format('YYYY/MM/DD');

const dateFormat = 'YYYY/MM/DD';
const TabPane = Tabs.TabPane;
const PdtPosition = ({dispatch,pdtposition,location,form: {
			getFieldDecorator,
			validateFields,
			getFieldsValue },
})=>{
	if(pdtposition.status){
		const {poslist,page,state,name} = pdtposition;
		const columns = [
			{
				title: '日期',
				dataIndex: 'date',
				key: 'date',
				sorter: (a, b) => a.date > b.date?1:-1,
				width: 100,
			},
			{
				title: '股票代码',
				dataIndex: 'stockCode',
				key: 'stockCode',
				width: 100,
				sorter: (a, b) => a.stockCode - b.stockCode,
				filterDropdown: (
				<div className={style.customfilterdropdown}>
					<Input
						placeholder="请输入股票代码"
						onChange={onInputChange}
						onPressEnter={onSearch}
						value={name}
					/>
					<Button type="primary" onClick={onSearch}>搜索</Button>
				</div>
			),
			filterIcon: <Icon type="search" style={{ color: '#aaa' }} />,
			filterDropdownVisible: pdtposition.filterDropdownVisible,
			onFilterDropdownVisibleChange: (visible) => {
					dispatch({
						type:'pdtposition/alterState',
						payload:{
							filterDropdownVisible:visible,
							loading:false
						}
					})
				},
			},
			{
				title: '持仓数量',
				dataIndex: 'volumn',
				key: 'volumn',
				width: 100,
			},
			{
				title: '持仓市值',
				dataIndex: 'marketValue',
				key: 'marketValue',
				width: 100,
			},
			{
				title: '多空方向',
				dataIndex: 'position',
				key: 'position',
				width: 100,
			},
		]
		const bD = location.query.beginDate;
		const eD = location.query.endDate;

		// 条数
		// function onShowSizeChange(current, pageSize) {
		// 	const querys = location.query
		// 	const pagesize = pdtposition.pageSize
		// 	const name = pdtposition.name
		// 	if(name){
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				name:name,
		// 				pagesize:pageSize,
		// 				currentpage:1
		// 			}
		// 		})
		// 	}else{
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				pagesize:pageSize,
		// 				currentpage:1
		// 			}
		// 		})
		// 	}
		// }
		//当前页
		// function onChangecurrentpage(current){
		// 	const querys = location.query
		// 	const currentpage = pdtposition.currentpage
		// 	const pagesize = page.pagesize
		// 	const name = pdtposition.name
		// 	if(name){
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				pagesize:pagesize,
		// 				name:name,
		// 				currentpage:current
		// 			}
		// 		})
		// 	}else{
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				pagesize:pagesize,
		// 				currentpage:current
		// 			}
		// 		})
		// 	}
		// }
		//排序
		// function onSorterChange(pagesize,filters, sorter){
		// 	const querys = location.query
		// 	const orderField = sorter.field
		// 	const orderSort = sorter.order
		// 	const name = pdtposition.name
		// 	if(name){
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				currentpage:'1',
		// 				name:name,
		// 				orderFiled:orderField,
		// 				orderSort:orderSort
		// 			}
		// 		})
		// 	}else{
		// 		dispatch({
		// 			type:'pdtposition/changeState',
		// 			payload:{
		// 				...querys,
		// 				currentpage:'1',
		// 				orderFiled:orderField,
		// 				orderSort:orderSort
		// 			}
		// 		})
		// 	}
		// }
	function handleSubmit(e) {
		e.preventDefault();
		validateFields((err,fieldsValue)=> {
			if (err) {
			return;
			}
			const productId = location.query.productId
			const productCode = location.query.productCode
			const rangeValue = fieldsValue['range-picker'];
			if(!_.isEmpty(rangeValue)){
				const beginDate = rangeValue[0].format('YYYYMMDD')
				const endDate = rangeValue[1].format('YYYYMMDD')
				dispatch({
					type:'pdtposition/changeRoute',
					payload:{
						productId,
						productCode,
						beginDate,
						endDate
					}
				})
			}else{
				message.warning('请选择时间!');
			}

		})
	}

	function onInputChange (e) {
		const inputValue = e.target.value
		const loading = pdtposition.loading
		dispatch({
			type:'pdtposition/alterState',
			payload:{
				name:inputValue,
				filterDropdownVisible:true,
				loading:false
			}
		})
 }
 //自定义筛选
 function onSearch(){
	const productId = location.query.productId
	const beginDate = location.query.beginDate
	const endDate = location.query.endDate
	const name = pdtposition.name
		dispatch({
			type:'pdtposition/changeState',
			payload:{
				productId,
				beginDate,
				endDate,
				name:name,
			}
		})
		dispatch({
			type:'pdtposition/alterState',
			payload:{
				name:'',
				filterDropdownVisible:false,
				loading:true
			}
		})
 }

		function handleBacktrack(){
			dispatch(routerRedux.push({
				pathname:`/systemMgt/accountMgt/pdtMgt?name=${location.query.productCode}`,
			}))
		}
		return(
				<div>
					<div className={style.breaddiv}>
						<Breadcrumb separator=">">
							<Breadcrumb.Item  className={style.breadcr}>产品管理</Breadcrumb.Item>
							<Breadcrumb.Item>{`${location.query.productCode}持仓列表`}</Breadcrumb.Item>
						</Breadcrumb>
					</div>
					<div className="page-postion-table content-inner">
						<div className={style.toolbar}>
							<Form layout="inline" onSubmit={handleSubmit}>
								<Row className={style.searchRow} type="flex" justify="start" align="middle">
									<Col>
										<FormItem
											label="时间选择"
											>
												{getFieldDecorator('range-picker',{
													initialValue: [moment(bD),moment(eD)],
												},)(
											 <RangePicker format={dateFormat}/>
											)}
										</FormItem>
									</Col>
									<Col>
										<Button type="primary" htmlType="submit">查询</Button>
									</Col>
								</Row>
							</Form>
						</div>
						<div>
							<Tabs defaultActiveKey="1" >
								<TabPane tab="持仓" key="1" >
									<Spin spinning={pdtposition.loading}>
										<Table
											columns={columns}
											dataSource={poslist}
											pagination={false}
											record={record => `${record.date}-${record.stackCode}-${record.volumn}-${record.marketPosition}-${record.position}`}
											scroll={{y:400}}
											size="middle"
											className={style.dataTable}
										/>
									</Spin>
								</TabPane>
								<TabPane tab="资金流水" key="2">
									<FundsTabel location={location}/>
								</TabPane>
							</Tabs>
						</div>
					</div>
				</div>
			)
	}else{
		return null;
	}
}
PdtPosition.PropTypes = {};
export default connect(({pdtposition})=>({pdtposition}))(Form.create()(PdtPosition))
